<template>
    <div class="list">
        <van-cell v-for="value in list" :key="value.order_id" center :title="value.foodname" :label="value.content">
            <template #icon>
                <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </template>
            <template #extra>
                <van-button type="danger" size="small" @click="onShow(value.item_id)">添加评论</van-button>
            </template>
        </van-cell>
    </div>
    <!-- 弹出层 -->
    <div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" closeable
        close-on-click-overlay @close="onClose"
            round>
            <div>
                <van-cell-group inset>
                    <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50"
                        placeholder="请输入留言" show-word-limit />
                </van-cell-group>
                <div class="btn">
                    <van-button type="success" @click="onSubmit">提交</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getAllOrdersByUserApi, insertCommentApi } from '@/api';
import { useCounterStore } from '@/stores/counter';
import { useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter()
const store = useCounterStore()
const list = ref([]);
const show = ref(false);
const message =ref("");
const itemId = ref(0);
const getOrder = async (e) => {
    const res = await getAllOrdersByUserApi(e);
    list.value.push(...res);
};
const onShow = (e) => {
    show.value = true;
    itemId.value = e;
}
const onClose = () => {
    show.value = false;
    message.value = "";
}
const onSubmit =  () => {
    insertComment({
        itemId: itemId.value,
        content: message.value
    });
    message.value = "";
    show.value = false;
}
const insertComment = async e => {
    const res = await insertCommentApi(e);
    if (res.success === '0') {
        showFailToast('提交失败！');
    } else {
        showSuccessToast('提交成功！');
    }
}
onMounted(() => {
    getOrder(store.userId);
});
</script>

<style scoped>
.van-field {
    margin-top: 40px;
  border: 1px solid #eee;
  border-radius: 20px;
}
.btn{
    display: flex;
    justify-content: center;
}
.van-button--normal{
    margin-top: 20px;
    width: 50%;

}
.van-image{
    border-radius: 20px;
    margin: 10px;
}
:deep(.van-image__img){
    border-radius: 20px;
}
</style>